<template>
  <a-modal :title="title" :width="800" :visible="visible" @cancel="handleCancel"  cancelText="关闭" okText="下一项" style="top:20px;">
    <a-spin :spinning="confirmLoading">
      <div style="display: flex;">
        <div style="margin-top:50px;width:75%">
         
          <div class="steps-content" style="margin:10px;width: 100%;"> 
            <div v-if="current == 0" class="downcss"> 
              <img src="../../../assets/down.jpg"/>
              <div style="    margin-left: 90px;">
                <p class="title">操作指引</p>
                 
                <p class="tl" style="color:#409eff">1. 请下载本机信息文件</p>
                <p class="tl">2. 联系管理员发送文件</p>
                <p class="tl">3. 上传注册文件注册</p>
                <p class="tl">4. 刷新页面重新登录系统</p>
                <a-button type="primary" @click="download">下载本机信息</a-button>
              </div>
            </div>
            <div v-if="current == 1"  class="downcss">
              <img src="../../../assets/upload.jpg"/>
              <div style="    margin-left: 90px;">
                <p class="title">操作指引</p>
                 
                <p class="tl">1. 请下载本机信息文件</p>
                <p class="tl">2. 联系管理员发送文件</p>
                <p class="tl" style="color:#409eff">3. 上传注册文件注册</p>
                <p class="tl">4. 刷新页面重新登录系统</p>
                <!-- <a-button type="primary">上传注册文件</a-button> -->
                <a-upload
                  v-model:file-list="fileList"
                  name="file"
                  :multiple="true"
                  :action="url.upload"
                  :headers="headers"
                  @change="handleChange"
                 
                >
                  <a-button  v-if="filelist.length == 0">
                    
                    选择注册文件
                  </a-button>
                  
                <upload-outlined></upload-outlined>
                </a-upload>
                <!-- <a-upload
                  :action="url.upload"
                  :transform-file="transformFile"
                  v-model:file-list="fileList"
                  :multiple="true"  
                  :headers="headers" 
                  name="file"
                  :key="fileKey"
                  @change="handleChange"
                >
                  <a-button>
                    
                    Upload
                  </a-button>
                </a-upload> -->
              </div>
            </div>
          </div>
        </div>
        
      </div>
      
    </a-spin>
    <template slot="footer">
        <div >
          <a-button type="link">
            
          </a-button>
          <a-button type="white" @click="handleCancel" v-if="current < 2">关闭</a-button>
          <a-button type="primary" @click="handlePrevious" v-if="current > 0 && current < 5">上一步</a-button>
          <a-button type="primary" @click="handleNext" v-if="current < 1">下一步</a-button>
          <a-button type="danger" @click="handleOk" v-if="current ==  1">提交注册</a-button>
        </div>
        
    </template>
    <a-modal v-model:visible="isLoading" :footer="null" :keyboard="false" :maskClosable="false" :closable="false" 
    :width="100"
    :height="100"    wrapClassName="web">
      <div style="text-align:center;margin-top:20px;" >
        <a-spin :size="large"/>
        <p>loading...</p> 
      </div>
    </a-modal>

  </a-modal>
    
</template>

<script>
  import { ref } from 'vue';
  import Vue from 'vue'
  import { httpAction, getAction } from '@/api/manage'
  import { message } from 'ant-design-vue'
  import { validateDuplicateValue,pushIfNotExist, filterObj  } from '@/utils/util' 
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { mixinDevice } from '@/utils/mixin'
  import store from '@/store'
  import axios from 'axios'   
  import OSInfo from '@/utils/OSInfo' 
  import sign from '@/components/sign/sign.js' 
  const key = 'updatable';
 
  export default {
    name: 'RegForm',
    mixins:[JeecgListMixin, mixinDevice],
    components: { 
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        fileKey:"",
        isLoading:false,
        steps: [
          {
            title: '下载本机信息',
            content: 'First-content',
          },
          {
            title: '上传注册文件',
            content: 'Second-content',
          }           
        ],
        spinning: false,
        operatingSystem: null, // 操作系统
        delayTime: 500,
        btntxt:'下一项',
        title:'',
        visible: false,
        addOrEditForm: this.$form.createForm(this),
        current: 0,
       
        headers: { 
          'X-Access-Token':  store.getters.token
        }, 
        model:{
        },
        filelist:[],
        confirmLoading: false,
       
        url: {
          dregwj: "/sys/downregwj", 
          uregwj: "/sys/uploadregwj", 
          list: "/mlwj/daMlwj/list",
          upload: window._CONFIG['domianURL'] +"/ap/apInfo/upload",
        },
        lx:'刷卡', 
        fileKey:"", 

      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    }, 
    created () {
       //备份model原始值
      
      this.data.czlx = "1";
      this.modelDefault = JSON.parse(JSON.stringify(this.model));   
    },
    methods: {   
      handleChange(info) {
        const status = info.file.status;
        if (status !== 'uploading') {
          this.filelist = info.fileList;
          console.log(info.file, info.fileList);
        }
        if (status === 'done') { 
          this.filelist = info.fileList;
          this.$message.success(`${info.file.name} 文件上传成功.`);
        } else if (status === 'error') {
          this.filelist = info.fileList;      
          this.$message.error(`${info.file.name} 文件上载失败.`);
        }
      },
      handleOk(){
        const that = this;  
        if(that.filelist.length==0){
          that.$message.error('请选择文件');
          return;
        } 
        let data = {
          file: that.filelist[0].response
        }
        that.isLoading = true;
        httpAction(this.url.uregwj,data,'post').then((res)=>{ 
            if(res.code == "0"){ 
              that.isLoading = false;
              that.$message.success('注册成功');
              that.$emit('ok');
              that.close(); 
            }else{
              that.$message.error(res.msg);
            } 
          }).finally(() => { 
            // this.confirmLoading = false;
            that.isLoading = false;
        })   
      },
      handlePrevious(){
        this.current--;
      }, 
      
       
      close () {
        this.$emit('close');
        
        this.visible = false;
      },  
      download(id){
        this.isLoading = true;
        httpAction(this.url.dregwj,'','get').then((res)=>{ 
           
          if(res.code == "0"){
            // this.loading = false;
            window.open(res.url);
            this.isLoading = false; 
          }
          }).finally(() => { 
        })
      }, 
      next() {
        this.current++;
      },
      prev() {
        this.current--;
      },
      onSearch(){ 
      },
      onExpand(expandedKeys) {
        console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.expandedKeys = expandedKeys;
        this.autoExpandParent = false;
      },
      onCheck(checkedKeys,e) {
        console.log('onCheck',e);
        console.log('onCheck', checkedKeys);
         
        this.checkedKeys = checkedKeys;
      },
      dateFormat(time) {
				let date = new Date(time);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				return year + "年" + month + "月" + day +"日"//+hours+":"+minutes+":"+seconds;
			},  
      onSelect(selectedKeys, info){
        let level = info.selectedNodes[0].data.props.level;
        switch (level) {
          case "1":
            this.lx = '人员'; 
            this.getryxx(info.selectedNodes[0].data.props.ryid); 
            break;
          case "2":
            this.lx = '目录'; 

            this.xzxx.ryxm = info.selectedNodes[0].data.props.choose;
            this.xzxx.mlmc = info.nativeEvent.srcElement.innerText; 
            this.xzxx.ryid = info.selectedNodes[0].data.props.ryid;
            this.xzxx.mlid = info.selectedNodes[0].data.props.mlid;
            this.xzxx.id   = info.selectedNodes[0].data.props.rymlid;
            this.xzxx.sfzh   = info.selectedNodes[0].data.props.sfzh;
            this.xzxx.rwsj   = info.selectedNodes[0].data.props.rwsj;
            this.xzxx.twsj   = info.selectedNodes[0].data.props.twsj;
            this.xzxx.lxdh   = info.selectedNodes[0].data.props.lxdh;
            this.data.bjyrxm = this.xzxx.ryxm;
            this.data.bjyrsfzh = this.xzxx.sfzh;
            this.data.bjyrrwsj = this.dateFormat(this.xzxx.rwsj);
            this.data.bjyrtwsj = this.dateFormat(this.xzxx.twsj);
            this.data.bjyrlxdh = this.xzxx.lxdh;
            this.data.bjyrid = this.xzxx.ryid; 
            console.log('目录信息',info.selectedNodes[0].data.props)
            break;        
          case "3":
            
            break;
        }
        console.log('selected', selectedKeys, info);
        // console.log('selected-code',info.selectedNodes[0].data.props.code)
      }, 
      handleCancel() {
        this.handleClear()
        this.close()
      },
      handleNext(){
          this.current++;
      },
      handleChange(info) {
        const status = info.file.status;
        if (status !== 'uploading') {
          this.filelist = info.fileList;
          console.log(info.file, info.fileList);
        }
        if (status === 'done') { 
          this.filelist = info.fileList;
          this.$message.success(`${info.file.name} 文件上传成功.`);
        } else if (status === 'error') {
          this.filelist = info.fileList;      
          this.$message.error(`${info.file.name} 文件上载失败.`);
        }
      },
      show() {  
         
        this.visible = true;
        this.current = 0;
        
        this.data.czlx = 1;
        this.handleClear();  
        this.addOrEditForm.resetFields();
        if (this.operatingSystem == 'Windows'){
          this.$refs.WebCamera.show();
        }
        if (this.operatingSystem == 'Linux' || this.operatingSystem == 'UNIX'){
          this.$refs.LebCamera.show();
        }
        this.visible = true;
      },
      handleClear(){
        this.filelist = [];
      },
      handleChose(record){  
        let push = true;
        this.data.xzdawjlist.forEach((item, index) => { 
			    if (item.id == record.id){
            console.log("重复")
            push = false;
            return;
          }
				})
        if (push){
          let data = {
            ryxm: this.xzxx.ryxm,
            mlmc: this.xzxx.mlmc,
            ryid: this.xzxx.ryid,
            mlid: this.xzxx.mlid, 
            id: record.id,
            mlmc: record.mlmc,
            wjdz: record.wjdz,
            wjmc: record.wjmc,
          }
          this.data.xzdawjlist.push(data);
        }
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      submitForm () {
        
        const that = this;
        if (this.filelist.length == 0){
          this.$message.error("请提交申请文件");
          return;
        }
        if (this.data.xzdawjlist.length == 0){
          this.$message.error("请选择档案文件");
          return;
        }
        httpAction(this.url.add,this.data,'post').then((res)=>{ 
          console.log(res)
          if(res.code == "0"){
            this.$emit('ok');
            this.close(); 
          }
          }).finally(() => { 
        })   
       
      },
    }
  }
</script>
<style>
  .ant-upload.ant-upload-drag{
    height:200px
  }
  .ant-card{
    height:100%
  }
  .ant-card-body{
    padding: 10px;
  }
  .vsp{
    margin-left:5px;
  }
  .loading-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgb(0 0 0 / 20%);;
  
      position: absolute;
      top: 0;
      left: 0;
  }  
  .web {
      .ant-modal-content {
          background-color: transparent;
          box-shadow: none;
      }
      .ant-modal {
          top: 350px; /* 距离顶部20像素 */
      }
  }
  .downcss{
    display: flex;
    height: 400px;
    text-align: left;
    align-items: center;
    justify-content: left;
  }
  .title{
    font-size: 18px;
    font-weight: bold;
  }
  .tl{
    font-size: 16px;
  }
</style>